<template>
	<div class="goodsDiv">
		<!--header-->
		<div class="navHeaderContainer">
			<nav-header></nav-header>
		</div>
		<!--面包屑-->
		<!--<div class="navBreadcrumbContainer">
			<nav-breadcrumb></nav-breadcrumb>
		</div>-->
		<div class="goodsContainer">
			<!--banner-->
			<div class="bannerContent">
				<banner :banners="banners" :is-pagination="isPagination" :is-button-prev-and-buttonNext="isButtonPrevAndButtonNext" :is-scrollbar="isScrollbar"></banner>
			</div>
			<div class="goodsContent">
				<!--商品搜索  价格排序-->
				<div class="goodsPriceSortSearch">
					<el-row :gutter="5">
						<el-col :span="20" style="margin-top: 2px;">
							<div class="goodsSearch">
								<button class="goodsSearchBtn" @click= "searchgoods()">搜 索</button>
								<div class="goodsSearchInput">
									<el-input placeholder="请输入商品名称查询" prefix-icon="el-icon-search" v-model="goodsKeyWords" v-on:keyup.enter.native = "searchgoods()"></el-input>
								</div>
							</div>
						</el-col>
						<el-col :span="4" style="margin-top: 2px;">
							<div class="goodsPriceSort text_align_center">
								<span class="cursor_pointer" @click="priceSort()">价格</span>
								<i class="el-icon-sort-up font_weight_bold" v-bind:class="{'priceUp' : isUpDown}"></i>
								<i class="el-icon-sort-down font_weight_bold" v-bind:class="{'priceDown' : !isUpDown}"></i>
							</div>
						</el-col>
					</el-row>
				</div>
				<div class="goodsListContainer">
					<el-row :gutter="5" class="height_100 box_shadow" style="margin: 0px;padding: 7px;">
						<!--商品价格过滤-->
						<el-col :span="3" class="height_100">
							<div class="goodsPriceSection">
								<dl class="priceFilter">
									<dt>价格:</dt>
									<dd>
										<a href="javascript:void(0)" v-bind:class="{'priceSectionChecked' : priceFilterChecked == 'all'}" v-on:click="priceAllChecked()">全部</a>
									</dd>
									<dd v-for="(filter,index) in priceFilterArr">
										<a href="javascript:void(0)" v-on:click="setPriceFilter(index, filter)" v-bind:class="{'priceSectionChecked' : priceFilterChecked == index}">{{filter.startPrice}} - {{filter.endPrice}}</a>
									</dd>
								</dl>
							</div>
						</el-col>
						<el-col :span="21" class="height_100">
							<div class="goodsList">
								<ul>
									<li v-for="(item, index) in productDataArr" @click="goodsDetails(item)">
										<div class="goodsImage margin_bottom_5 cursor_pointer">
											<img v-lazy="'./../../static/images/goodsImage/' + item.productImage + '.jpg'" alt="" />
										</div>
										<div class="goodsNamePrice text_align_center font_size_14">
											<h3 class="goodsName cursor_pointer" v-bind:title = "item.productName + ' ' + item.productDefaultEdition">{{item.productName}} {{item.productDefaultEdition}}</h3>
											<p class="goodsIntro" v-bind:title = "item.productDefaultIntros">{{item.productDefaultIntros}}</p>
											<p class="goodsPrice">{{item.productDefaultPrice + ' 元'}}</p>
										</div>
									</li>
								</ul>
							</div>
							<!--分页-->
							<el-pagination v-show = "productDataArr.length" background layout="prev, pager, next" @current-change = "handleCurrentChange" :current-page.sync="currentPage" :page-size = "pageSize" :total = "goodsTotal" style="text-align: right;">
							</el-pagination>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
		<div class="navFooterContainer">
			<nav-footer></nav-footer>
		</div>
	</div>
</template>

<style>
	.goodsList ul:after {
		overflow: hidden;
		display: block;
		content: "";
		clear: both;
	}

	.goodsList ul li {
		float: left;
		width: 241px;
		height: 320px;
		margin-right: 8px;
		margin-left: 9px;
		margin-bottom: 15px;
		background: #FFFFFF;
		border: 2px solid #e9e9e9;
		-webkit-transition: all .5s ease-out;
		transition: all .5s ease-out;
	}

	.goodsList ul li:hover {
		border-color: #ee7a23;
		-webkit-transform: translateY(-3px);
		-ms-transform: translateY(-3px);
		transform: translateY(-3px);
		-webkit-box-shadow: 0 0 10px #999;
		box-shadow: 0 0 10px #999;
		-webkit-transition: all .5s ease-out;
		transition: all .5s ease-out;
	}

	.goodsImage {
		width: 237px;
		height: 224px;
	}

	.goodsImage img {
		width: 100%;
		height: 100%;
	}

	.goodsNamePrice {}

	.goodsNamePrice .goodsName {
		margin: 0px 10px 6px;
		display: block;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		color: #333333;
	}

	.goodsNamePrice .goodsIntro {
		margin: 0px 10px 10px;
		height: 18px;
		font-size: 12px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		color: #b0b0b0;
	}

	.goodsNamePrice .goodsPrice {
		margin: 0px 10px 15px;
		color: #ff6700;
	}

	.goodsDiv {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.navHeaderContainer {}

	.goodsContainer {
		width: 1200px;
		min-height: 800px;
		margin: 0px auto;
		overflow: auto;
	}

	.bannerContent {
		width: 1200px;
		height: 250px;
		margin: 10px auto;
	}

	.goodsContent {
		width: 1200px;
		min-height: 500px;
		margin: 10px auto;
		overflow: hidden;
		/*background: palevioletred;*/
	}

	.goodsPriceSortSearch {
		width: 100%;
		height: 45px;
		margin-bottom: 10px;
		background: #FFF;
	}

	.goodsSearch {}

	.goodsSearchInput {
		width: 350px;
		height: 40px;
		float: right;
	}

	.goodsSearchInput input {
		border-radius: 0px !important;
		border-right: 0px;
		border-color: #DB7093 !important;
	}

	.goodsSearchBtn {
		float: right;
		height: 40px;
    	line-height: 40px;
    	padding: 0px 20px;
		border-radius: 0px !important;
		background: #DB7093;
		border-color: #DB7093;
		color: #FFFFFF;

	}

	.goodsSearchBtn:hover {
		border-radius: 0px !important;
		background: #DB7093;
		border-color: #DB7093;
		color: #FFFFFF;
		opacity: 0.8;
	}
	.goodsPriceSort {
		height: 40px;
		line-height: 40px;
	}

	.goodsListContainer {
		width: 100%;
		/*height: 400px;*/
		background: #FFFFFF;
	}

	.goodsPriceSection {
		height: 100%;
		/*border-right: 1px solid rgba(0, 0, 0, 0.1);*/
		/*background: palegreen;*/
	}

	.goodsList {
		height: 100%;
		min-height: 670px;
		/*background: paleturquoise;*/
	}

	.priceUp,
	.priceDown,
	.priceSectionChecked {
		color: #ee7a23;
	}

	.priceFilter {
		padding: 16px 10px;
	}

	.priceFilter dd {
		margin-top: 10px;
	}

	.priceFilter dd a:hover,
	.priceFilter dd .priceSectionChecked {
		-webkit-transition: padding-left .3s ease-out;
		transition: padding-left .3s ease-out;
		border-left: 2px solid #ee7a23;
		padding-left: 15px;
		color: #ee7a23;
	}

	.priceFilter dd .priceSectionChecked {
		font-weight: bold;
	}
</style>

<script type="text/ecmascript-6">
	import NavHeader from '@/components/NavHeader.vue'
	import Banner from '@/components/Banner.vue'
	import NavBreadcrumb from '@/components/NavBreadcrumb.vue'
	import NavFooter from '@/components/NavFooter.vue'
	import axios from "axios"
	import { getCookies } from "./../util/getCookie.js"

	export default {
		components: {
			//header
			NavHeader,
			//轮播
			Banner,
			//面包屑
			NavBreadcrumb,
			//footer
			NavFooter
		},
		data() {
			return {
				banners: ['../static/images/bannerImage/001.jpg', '../static/images/bannerImage/002.jpg', '../static/images/bannerImage/003.jpg', '../static/images/bannerImage/004.jpg', '../static/images/bannerImage/005.jpg', '../static/images/bannerImage/006.jpg'],
				// 控制 轮播插件的  分页、左右箭头、进度条
				isPagination: false,
				isButtonPrevAndButtonNext: false,
				isScrollbar: false,
				//商品 搜索 关键字
				goodsKeyWords: "",
				isUpDown: true,
				//价格过滤默认全部
				priceFilterChecked: "all",
				//商品价格区间 数组
				priceFilterArr: [{
						startPrice: "0",
						endPrice: "500"
					},
					{
						startPrice: "500",
						endPrice: "1000"
					},
					{
						startPrice: "1000",
						endPrice: "1500"
					},
					{
						startPrice: "1500",
						endPrice: "2000"
					},
					{
						startPrice: "2000",
						endPrice: "2500"
					}
				],
				// 商品列表
				productDataArr: [],
				//滚动加载
				page: 1,
				pageSize: 8,
				sortFlag: true,
				goodsTotal : 1,
				priceFilterStart : "",
				priceFilterEnd : "",
				//分页中的当前页
				currentPage : 1
			};
		},
		computed: {

		},
		mounted: function() {
			this.goodsList();
		},
		methods: {
			//初始化商品列表
			goodsList() {
				var param = {
					sort: this.sortFlag ? 1 : -1,
					page: this.page,
					pageSize: this.pageSize,
					priceFilterStart : this.priceFilterStart,
					searchGoodsName : this.goodsKeyWords,
					priceFilterEnd : this.priceFilterEnd
				}
				axios.get("/goods/goodsList", {
					params: param
				}).then((response) => {
					var data = response.data;
					if(data.status == 0) {
						this.productDataArr = data.result.goodsListData;
						this.goodsTotal = data.result.total;
					}
				});
			},
			//分页
			handleCurrentChange(val) {
		        this.page = val;
		        this.goodsList();
		    },
		    //商品搜索
		    searchgoods () {
		    	this.page = 1;
		    	this.currentPage = 1;
		    	this.goodsList();
		    },
			//价格排序
			priceSort() {
				var _this = this;
				_this.isUpDown = !_this.isUpDown;
				_this.sortFlag = !_this.sortFlag;
				//数组对象排序
				function arrObjSort (item, sortFlag) {
					if (_this.sortFlag) {
						return function (a, b) {
							var value_1 = a[item];
							var value_2 = b[item];
							return value_1 - value_2;
						}
					}else {
						return function (a, b) {
							var value_1 = a[item];
							var value_2 = b[item];
							return value_2 - value_1;
						}
					}
				}
				_this.productDataArr.sort(arrObjSort("productDefaultPrice", _this.sortFlag));
			},
			//商品价格过滤
			setPriceFilter(index, filter) {
				this.priceFilterChecked = index;
				this.priceFilterStart = filter.startPrice;
				this.priceFilterEnd = filter.endPrice;
				this.page = 1;
        this.currentPage = 1;
				this.goodsList();
			},
			//商品价格过滤 全部按钮
			priceAllChecked() {
				this.priceFilterChecked = "all";
				this.priceFilterStart = "";
				this.priceFilterEnd = "";
				this.page = 1;
        this.currentPage = 1;
				this.goodsList();
			},
      //商品详情
      goodsDetails(item) {
        this.$router.push({
          path : "/GoodsDetails?id=" + item.productId
        })
      }
		}
	}
</script>
